<template>
    <div class="login">
        <div class="login-box">
            <el-card class="login-card">
                <div class="login-card-header">
                    <span>用户登录</span>
                </div>
                <el-form :model="form" ref="loginForm" label-width="50px">
                    <el-form-item label="账号">
                        <el-input v-model="form.username" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                        <el-input type="password" v-model="form.password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label-width="0px">
                        <div class="login-btn-box">
                            <el-button class="login-btn" type="primary" @click="submitForm()">登录</el-button>
                            <el-button class="login-btn" @click="resetForm()">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-card>
        </div>
    </div>
    
</template>
<script lang="ts" setup>
    
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { loginAPI } from '@/http/api/login/login';

const form = reactive({
    username: '',
    password: ''
});

const submitForm = () => {
// 这里可以添加登录逻辑
    if(!form.username || !form.password) {
        ElMessage({
            message:"请输入用户名和密码",
            type:'error',
            duration:1500
        })
        return;
    }
    // ElMessage.success('登录成功!');
    loginAPI(form).then((res)=>{
        localStorage.setItem("token",res.data.token);
        location.href = "/manage";
    });
    
};

const resetForm = () => {
// 这里可以添加重置逻辑
    form.username = '';
    form.password = '';
    ElMessage.info('重置成功!');
};

</script>
<style scoped>
    .login {
        position: absolute;
        width: 100%;
        height: 100%;
        background-image: url(../../assets/images/bg/login-bg.jpg);
        background-size: 100%;
    }
    .login-box {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-self: center;
    }
    .login-card {
        position: relative;
        width: 500px;
        max-width: 90%;
        padding: 5px 40px;
        margin: 10px auto;
        overflow: hidden;
    }
    .login-card-header{
        text-align: center;
        margin-bottom: 25px;
    }
    .login-btn-box {
        width: 100%;
        display: flex;
        justify-self: center;
    }
    .login-btn {
        margin: auto;
    }
</style>